<template>
  <div class="group">
    <div class="group_top">
      <div class="avatar">
        <span v-for="item in avatarList" :key="item">
          <img :src="item" alt="" />
        </span>
        <i>...</i>
      </div>
      <span class="take">{{ groups.totalPeople }}人参与</span>
      <div class="button">
        <span>GO</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="group_bottom" v-show="productList != null">
      <Goods-view :goodsList="productList"></Goods-view>
    </div>
  </div>
</template>

<script>
const GoodsView = () =>
  import(
    /* webpackChunkName: "FxhDemoGoodsView" */ "@/components/Littlecom/GoodsView.vue"
  );
export default {
  name: "FxhDemoGroup",
  props: ["groups"],
  data() {
    return {
      avatarList: [],
      productList: null,
    };
  },
  components: {
    GoodsView,
  },
  created() {
    this.avatarList = this.groups.avatarList;
    this.productList = this.groups.productList;
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
.group {
  width: 328px;
  height: 226px;
  margin-left: 15px;
  position: relative;
  .group_top {
    @include flex;
    width: 245px;
    margin-left: 90px;
    padding-top: 10px;
    .avatar {
      height: 19px;

      img {
        width: 18px;
        height: 18px;
        margin-right: -5px;
        border-radius: 50%;
      }
      i {
        color: white;
        position: absolute;
        z-index: 1000;
        left: 120px;
        top: 5px;
      }
    }
    .take {
      color: #ff448f;
      font-size: 10px;
      font-weight: 500;
      margin-left: 20px;
    }
    .button {
      margin-top: -3px;
      margin-left: 100px;
      color: #fe960f;
      font-weight: 800;
      width: 42px;
      height: 19px;
      font-size: 10px;
      background: linear-gradient(142deg, #ffe9ce, #ffd6a7);
      opacity: 1;
      border-radius: 18px;
      text-align: center;
      line-height: 19px;
    }
  }
  .group_bottom {
    margin-top: 20px;
    width: 307px;
  }
  background: url("../../../public/img/index.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>
